<template>
    <view>
        <nav-bar ref="navBar" type="transparentFixed" fontColor="#FFF" transparentFixedFontColor="#FFF" bgColor="themeBgColor">{{title}}</nav-bar>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <view class="shop_info_box" :style="{paddingTop: statusBarHeight + 'px'}">
            <image :src="shopInfo.logo" mode="aspectFill"></image>
            <view class="mask"></view>
            <view class="shop_content">
                <view class="shop_info">
                    <image :src="shopInfo.logo" @click="onPageJump('/pages/home/shop/shopInfo?objId='+shopInfo.objId)"
                        mode="aspectFill"></image>
                    <view class="shop_basicinfo">
                        <text @click="onPageJump('/pages/home/shop/shopInfo?objId='+shopInfo.objId)">{{shopInfo.name}}</text>
                        <view>
                            <view class="type_attention">
                                <view v-if="shopInfo.selfSupport">自营</view>
                                <!-- <text>54.3万人关注</text> -->
                            </view>
                            <view>
                                <button v-if="shopInfo.collection" @click="onCollection" class="like active">已收藏</button>
                                <button v-else @click="onCollection" class="like">收藏</button>
                                <button class="customerservice" @click="onGoService">客服</button>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="shop_nav_position">
                    <view class="shop_nav_box" :class="{ceiling: scrollTop > (statusBarHeight + 180)}">
                        <view class="ic_search" @click="onPageJump('/pages/home/shop/shopSearch?objId='+shopInfo.objId)"></view>
                        <view class="options">
                            <text :class="{ active: showType == 1000 }" @click="onShowType(1000)">商品</text>
                            <text :class="{ active: showType == 3000 }" @click="onShowType(3000)">拼团</text>
                            <text :class="{ active: showType == 4000 }" @click="onShowType(4000)">秒杀</text>
                            <text :class="{ active: showType == 5000 }" @click="onShowType(5000)">砍价</text>
                            <text :class="{ active: showType == 2000 }" @click="onShowType(2000)">优惠</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        
        <view v-if="showType == 1000" class="goods_sort_box">
            <view :class="{active:sortType == 3000}" @click="onSortType(3000)">智能排序</view>
            <view :class="{active:sortType == 3002}" @click="onSortType(3002)">好评优先</view>
            <view :class="{active:sortType == 3001}" @click="onSortType(3001)">低价优先</view>
            <view :class="{active:sortType == 3003}" @click="onSortType(3003)">销量优先</view>
        </view>
        <mescroll-body v-if="showType != 2000" ref="mescrollRef" height="-444" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback">
            <waterfall-goods v-if="showType == 1000" ref="waterfall" :list="goodsDataList"></waterfall-goods>
            <view v-else-if="showType == 3000" class="goods_box">
                <fight-goods-item v-for="(item,index) of goodsDataList" :key="item.objId" :item="item" :index="index"></fight-goods-item>
            </view>
            <view v-else-if="showType == 4000" class="goods_box">
                <spike-goods-item v-for="(item,index) of goodsDataList" :key="item.objId" :item="item" :index="index"></spike-goods-item>
            </view>
            <view v-else-if="showType == 5000" class="goods_box">
                <view v-for="(item,index) of goodsDataList" :key="item.objId">
                    <bargain-goods-many-item v-if="index !== 0 && (index + 1)%5 == 0 && goodsDataList[index + 1]" :list="[item, goodsDataList[index + 1]]" :index="index"></bargain-goods-many-item>
                    <bargain-goods-item v-else-if="!(index == 2 && (index)%5 == 0)" :item="item" :index="index"></bargain-goods-item>
                </view>
            </view>
        </mescroll-body>
        <view class="bg_color" v-if="showType == 2000">
            <view class="full_reduction_box">
                <view class="full_reduction_item" v-for="(item,index) of shopInfo.fullDiscountMoney" :key="index">{{ item }}</view>
            </view>
            <view class="coupon_card" v-for="(item,index) of couponList" :key="index">
                <view class="left_info">
                    <view class="coupon_card_priceinfo">
                        <view>
                            ￥
                            <text>{{item.priceDiscount}}</text>
                        </view>
                        <text>{{item.subtitle}}</text>
                    </view>
                    <view class="coupon_card_nameinfo">
                        <text>{{item.title}}</text>
                        <view v-if="item.effectiveDate">有效期限：{{item.effectiveDate}}</view>
                        <view v-else>长期有效</view>
                    </view>
                </view>
                <button @click="onReceiveCoupon(item)" :class="{gray: item.receive }">领取</button>
            </view>
            <view class="load_more" v-if="shopInfo.fullDiscountMoney.length == 0 && couponList.length == 0">
                <view class="noData" :style="'height:60vh'">
                    <image src="http://qn.kemean.cn/upload/201907/23/illustration3.png" mode="aspectFit"></image>
                    <text>暂无优惠喔~</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import waterfallGoods from '@/components/module/waterfall_goods.vue';
    import fightGoodsItem from '@/components/module/fight_goods_item.vue';
    import spikeGoodsItem from '@/components/module/spike_goods_item';
    import bargainGoodsItem from '@/pages/bargain/components/bargain_goods_item';
    import bargainGoodsManyItem from '@/pages/bargain/components/bargain_goods_many_item';
    import { appShare,
        publicShare
    } from '@/config/utils';
    import MescrollMixin from "@/components/common/mescroll-uni/mescroll-mixins.js";
    export default {
    	mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
        components: {
            waterfallGoods,
            fightGoodsItem,
            spikeGoodsItem,
            bargainGoodsItem,
            bargainGoodsManyItem,
        },
        data() {
            return {
                showType: 1000,
                statusBarHeight: 0,
                // 当前商铺Id
                objId: '',
                downOption: {
                	auto: false //是否在初始化后,自动执行downCallback; 默认true
                },
                shopInfo: {
                    "name": "",
                    "logo": "",
                    "bulletin": "",
                    "fullDiscountMoney": [],
                    "address": "",
                    "phone": "",
                    "introduce": "",
                    "qualification": [],
                    "collection": false,
                    "share": {
                        "shareUrl": "",
                        "shareTitle": "",
                        "shareContent": "",
                        "shareImg": "",
                        "shareRegisterUrl": null,
                        "pathMallShop": "",
                        "pathMallGoods": "",
                        "pathMallPtGoods": "",
                        "pathMallPackage": "",
                        "pathWmShop": "",
                        "pathTgShop": "",
                        "pathTgGoods": "",
                        "pathHotelShop": "",
                        "pathHotelHomestay": "",
                        "pathStall": "",
                        "pathEasy": "",
                        "pathMarket": "",
                        "pathArticle": ""
                    }
                },
                sortType: 3000,
                // 商品列表
                goodsDataList: [],
                couponList: [],
                title: "店铺详情",
                scrollTop: 0
            };
        },

        //第一次加载
        onLoad(e) {
            //获取手机状态栏高度
            this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
            this.objId = e.objId;
            this.pageData();
        },
        //页面显示
        onShow() {},
        //方法
        methods: {
            onPageJump(url) {
                uni.navigateTo({
                    url: url
                });
            },
            // 进入客服
            onGoService() {
                this.judgeLogin(() => {
                    uni.navigateTo({
                        url: '/pages/message/serviceChat?shopType=1501&objId=' + this.shopInfo.objId +
                            '&roomName=' + this.shopInfo.name
                    });
                });
            },
            onShowType(status) {
                this.showType = status;
                if (status != 2000) {
                    this.goodsDataList = [];
                    this.mescroll.triggerDownScroll();
                }
            },
            // 排序选择
            onSortType(val) {
                this.sortType = val;
                this.mescroll.triggerDownScroll();
            },
            onReceiveCoupon(item) {
                this.$http
                    .get('api/open/v1/receive_discount_voucher', {
                        objId: item.objId
                    })
                    .then(res => {
                        uni.showToast({
                            title: "领取成功"
                        });
                    });
            },
            // 加载商家和套餐商品数据
            pageData() {
                this.$http
                    .get('api/mall/shop/v1/info', {
                        objId: this.objId
                    })
                    .then(res => {
                        this.shopInfo = res;
                        uni.setNavigationBarTitle({
                            title: this.shopInfo.name
                        });
                        this.title = this.shopInfo.name;
                        // #ifdef H5
                        publicShare(res.share);
                        // #endif
                    });
                this.$http
                    .get('api/open/v2/discount_voucher_list', {
                        shopId: this.objId
                    })
                    .then(res => {
                        this.couponList = res;
                    });
            },
            /*下拉刷新的回调 */
            downCallback() {
            	//联网加载数据
            	this.loadData(1);
            },
            /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
            upCallback(page) {
            	//联网加载数据
            	this.loadData(page.num);
            },
            loadData(pageNo) {
                let httpData = {
                    pageNo: pageNo,
                    pageSize: 15,
                };
                let url = 'api/mall/goods/v1/list';
                if(this.showType == 1000){
                    httpData.shopId = this.objId;
                    httpData.sortType = this.sortType;
                } else if(this.showType == 3000){
                    url = 'api/mall/goods/v1/pt_list';
                    httpData.shopId = this.objId;
                    httpData.sortType = this.sortType;
                } else if(this.showType == 4000){
                    url = 'api/mall/goods/v1/spike_list';
                    httpData.shopId = this.objId;
                    httpData.sortType = this.sortType;
                } else if(this.showType == 5000){
                    url = 'api/mall/goods/v1/cut_list';
                    httpData.shopId = this.objId;
                }
                this.$http
                	.post(url, httpData,{
                		load:false
                	}).then(res => {
                		uni.stopPullDownRefresh();
                		//方法一(推荐): 后台接口有返回列表的总页数 totalPage
                		this.mescroll.endByPage(res.data.length, res.pages); //必传参数(当前页的数据个数, 总页数)
                		
                		if (pageNo == 1) {
                			this.goodsDataList = res.data;
                		} else {
                			this.goodsDataList = this.goodsDataList.concat(res.data);
                		}
                	}).catch(() => {
                		//联网失败, 结束加载
                		this.mescroll.endErr();
                	});
            },
            // 收藏
            onCollection() {
                this.judgeLogin(() => {
                    this.$http
                        .post('api/collect/v1/operate_data', {
                            type: 1401,
                            objIds: [this.shopInfo.objId]
                        })
                        .then(res => {
                            if (this.shopInfo.collection) {
                                uni.showToast({
                                    title: '取消收藏成功'
                                });
                                this.shopInfo.collection = false;
                            } else {
                                uni.showToast({
                                    title: '收藏成功'
                                });
                                this.shopInfo.collection = true;
                            }
                        });
                });
            },
        },
        //页面隐藏
        onHide() {},
        //页面卸载
        onUnload() {
            // #ifdef H5
            //设置分享内容
            publicShare();
            // #endif
        },
        onPageScroll(e) {
            this.scrollTop = e.scrollTop;
            this.$refs.navBar.pageScroll(e);
        },
        //用户点击分享
        onShareAppMessage(e) {
            return this.wxShare();
        }
    };
</script>
<style lang="scss" scoped>
    @import '@/style/mixin.scss';
    
    .bg_image {
        width: 100%;
        position: absolute;
        z-index: 1;
    }
    .bargain_container {
        padding-top: 30rpx;
    }
    .shop_info_box {
        position: relative;

        >image {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            filter: blur(6rpx);
        }

        .mask {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.5);
        }

        >.shop_content {
            padding: 108rpx 30rpx 20rpx 30rpx;
            display: flex;
            flex-direction: column;
            align-content: space-between;
            position: relative;
            z-index: 6;
            
            .shop_info {
                display: flex;
                justify-content: space-between;
                align-items: center;

                >image {
                    width: 80rpx;
                    height: 80rpx;
                    background-color: #FFF;
                }

                .shop_basicinfo {
                    display: flex;
                    flex: 1;
                    flex-direction: column;

                    padding-left: 30rpx;
                    z-index: 2;

                    >text {
                        font-size: 32rpx;
                        color: #ffffff;
                        position: relative;

                        &:after {
                            content: '';
                            background-image: url('../../../static/icon/theme/ic_shop_to.png');
                            background-position: center;
                            position: absolute;
                            background-size: 100% 100%;
                            background-repeat: no-repeat;
                            width: 30rpx;
                            height: 30rpx;
                            top: 10rpx;
                            margin-left: 20rpx;
                        }
                    }

                    >view {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        margin-top: 10rpx;

                        .type_attention {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;

                            >view {
                                padding: 2rpx 19rpx;
                                color: #ffffff;
                                @include theme('gradient_bg');
                                border-radius: 15rpx;
                                font-size: 24rpx;
                            }

                            >text {
                                padding-left: 12rpx;
                                font-size: 24rpx;
                                color: #ffffff;
                            }
                        }

                        >view {
                            display: flex;
                            justify-content: space-between;
                            align-items: flex-end;

                            .customerservice {
                                margin-left: 20rpx;
                                position: relative;
                                display: flex;
                                justify-content: center;
                                align-items: center;

                                &:before {
                                    content: '';
                                    position: relative;
                                    background-image: url('../../../static/icon/ic_shop_agent.png');
                                    background-size: 100% 100%;
                                    background-repeat: no-repeat;
                                    background-position: center;
                                    width: 28rpx;
                                    height: 28rpx;
                                    margin-right: 15rpx;
                                }
                            }

                            .like {
                                position: relative;
                                display: flex;
                                justify-content: center;
                                align-items: center;

                                &:before {
                                    content: '';
                                    position: relative;
                                    background-image: url('../../../static/icon/ic_collection_white.png');
                                    background-size: 100% 100%;
                                    background-repeat: no-repeat;
                                    background-position: center;
                                    width: 28rpx;
                                    height: 28rpx;
                                    margin-right: 12rpx;
                                }

                                &.active:before {
                                    content: initial;
                                }
                            }

                            >button {
                                width: 132rpx;
                                height: 48rpx;
                                border-radius: 24rpx;
                                font-size: 28rpx;
                                color: #ffffff;
                                line-height: 48rpx;
                                @include theme('gradient_bg');
                            }
                        }
                    }
                }
            }
        }
    }
    .shop_nav_position {
        height: 118rpx;
        padding-top: 50rpx;
    }
    .shop_nav_box {
        z-index: 10;
        display: flex;
        justify-content: space-between;
        align-items: center;
        &.ceiling {
            position: fixed;
            left: 0;
            right: 0;
            z-index: 10;
            top: calc(var(--status-bar-height) + 88rpx);
            padding: 10rpx 30rpx 0 30rpx;
            @include theme("gradient_bg");
        }
        // padding: 0 30rpx;
        .ic_search {
            display: flex;
            align-items: center;

            &:before {
                content: '';
                background-image: url('../../../static/icon/ic_search.png');
                background-size: 100% 100%;
                background-repeat: no-repeat;
                background-position: center center;
                width: 30rpx;
                height: 30rpx;
            }
        }

        .options {
            flex: 2;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            padding-left: 50rpx;

            .active {
                border-bottom: 6rpx solid #ffffff;
            }

            >text {
                font-size: 28rpx;
                color: #ffffff;
                position: relative;
                padding-bottom: 20rpx;
            }
        }
    }

    .goods_sort_box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        width: 100%;
        font-size: 28rpx;
        background-color: #f5f5f5;
        
        >view {
            padding: 30rpx 40rpx;
            white-space: nowrap;
            color: #333333;
            opacity: 0.5;
            position: relative;

            &::before {
                content: '';
                position: absolute;
                top: 50%;
                width: 2rpx;
                right: 0;
                height: 24rpx;
                transform: translateY(-50%);
                background: #cccccc;
            }

            &:last-child::before {
                content: inherit;
                width: 0;
            }
        }

        .active {
            opacity: 1;
        }
    }
    /deep/ .goods_box {
        padding-top: 24rpx;
    }
    .bg_color {
        width: 100%;
        background: #ffffff;
        height: calc(100vh - 344rpx - var(--status-bar-height));

        .full_reduction_box {
            padding: 0rpx 30rpx 0rpx 30rpx;
            display: flex;
            flex-wrap: wrap;

            .full_reduction_item {
                color: $themeColor;
                font-size: 28rpx;
                padding: 10rpx 24rpx;
                border: 1rpx solid $themeColor;
                margin-top: 24rpx;
                margin-right: 24rpx;
            }
        }

        .coupon_card {
            padding: 40rpx 30rpx 40rpx 45rpx;
            background: #fff3db;
            border-radius: 8rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 20rpx 30rpx 20rpx 30rpx;

            .left_info {
                display: flex;
                align-items: center;

                .coupon_card_priceinfo {
                    display: flex;
                    flex-direction: column;
                    align-items: center;

                    >view {
                        font-size: 28rpx;
                        color: #cb962c;

                        >text {
                            font-size: 60rpx;
                        }
                    }

                    >text {
                        font-size: 24rpx;
                        color: #cb962c;
                    }
                }

                .coupon_card_nameinfo {
                    display: flex;
                    flex-direction: column;
                    margin: 0rpx 30rpx;

                    >text {
                        font-size: 32rpx;
                        color: #cb962c;
                        margin-bottom: 20rpx;
                    }

                    >view {
                        font-size: 24rpx;
                        color: #cb962c;
                    }
                }

            }

            >button {
                flex-shrink: 0;
                width: 108rpx;
                height: 48rpx;
                @include theme('gradient_bg');
                border-radius: 24rpx;
                line-height: 48rpx;
                font-size: 24rpx;
                color: #ffffff;
            }
        }

        .product_card {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #ffffff;
            padding: 20rpx 30rpx;

            >image {
                width: 160rpx;
                height: 160rpx;
            }

            .product_info {
                flex: 1;
                display: flex;
                flex-direction: column;
                padding-left: 30rpx;
                min-height: 80rpx;

                >text {
                    font-size: 28rpx;
                    color: #333435;
                    padding-bottom: 4rpx;
                }

                >view {
                    font-size: 24rpx;
                    color: #cccccc;
                }

                .price_info {
                    display: flex;
                    justify-content: space-between;
                    align-items: flex-end;
                    padding-top: 20rpx;

                    >view {
                        font-size: 24rpx;
                        color: #ff4040;

                        >text {
                            font-size: 36rpx;
                        }
                    }

                    >text {
                        flex: 1;
                        font-size: 24rpx;
                        color: #cccccc;
                        text-decoration: line-through;
                        padding-left: 20rpx;
                    }

                    >button {
                        width: 160rpx;
                        height: 60rpx;
                        color: #ffffff;
                        line-height: 60rpx;
                        font-size: 28rpx;
                        @include theme('gradient_bg');

                        &.gray {
                            background-color: #eee;
                        }
                    }
                }
            }
        }
    }
    
    .load_more {
        .noData {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;

            image {
                width: 442rpx;
                height: 320rpx;
            }

            text {
                font-size: 28rpx;
                color: #999;
                margin-top: 30rpx;
            }
        }
    }
</style>
